<template>
	<view class="content" v-show="show">
		<view class="ffffff  mainpadding">
			<view class="flexleft xiahuaxian">
				<view class="titletext minwith">真实姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="zfbMsg.ali_name">
			</view>
			<view class="flexleft xiahuaxian margin-top">
				<view class="titletext minwith">支付宝账号</view>
				<input type="text" placeholder="请输入支付宝账号" v-model="zfbMsg.ali_account">
			</view>
			<view class="flexleft xiahuaxian margin-top">
				<view class="titletext minwith">手机号码</view>
				<input type="text" placeholder="请输入手机号" v-model="zfbMsg.mobile" :disabled="true">
			</view>
			<view class="flexbetween xiahuaxian margin-top">
				<view class="flexleft">
					<view class="titletext minwith">验证码</view>
					<input class="margin_right3" type="text" placeholder="请输入验证码" v-model="code">
				</view>
				<view class="huangsetext" @click="getcode">{{codetext}}</view>
			</view>
		</view>
		<view class="ljbd">
			<view class="logoutBtn bigbtn margin_top6" @click="atoncebd">立即绑定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				zfbMsg:{
					ali_account:"",//支付宝账户
					ali_name:"",//支付宝真实姓名
					mobile:"",//手机号
				},
				code:"",
				codetext:"获取验证码",
				timeout:false,
				show:false,
			}
		},
		onLoad() {
			this.userinfor()
		},
		methods: {
			// 用户信息
			userinfor() {
				httpRequest.request('/api/user/index', 'GET', {
					// 传参
				}).then(res => {
					if (res.code == 1) {
						this.show=true
						this.zfbMsg = res.data
					}
				}).catch(err => {
					this.show=true
					httpRequest.toast(err.msg);
				})
			},
			// 获取验证码
			getcode() {
				let _this = this
				if (!this.zfbMsg.mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				// let data={phoneNumber: phonenumber}
				httpRequest.request('/api/sms/send', 'GET', {
					mobile: this.zfbMsg.mobile,
					event: 'zfbcer'
				},false,false,true).then(resp => {
					if (resp.code == 1) {
						this.timeout = true
						var i = 59;
						var timer = setInterval(function() {
							_this.codetext = i + "秒";
							if (i < 1) {
								_this.timeout = false
								clearInterval(timer);
								_this.codetext = "获取验证码";
							} else {
								i--;
							}
						}, 1000)
					} else {
						httpRequest.toast(resp.msg);
					}
				})
			},
			// 立即绑定
			atoncebd(){
				let _this = this;
				if (_this.zfbMsg.ali_name == '') {
					httpRequest.toast('请输入真实姓名');
					return false;
				}
				if (_this.zfbMsg.ali_account == "") {
					httpRequest.toast('请输入支付宝账号');
					return false;
				}
				if (_this.zfbMsg.mobile == "") {
					httpRequest.toast('请输入手机号');
					return false;
				}
				if (_this.code == "") {
					httpRequest.toast('请输入验证码');
					return false;
				}
				httpRequest.request('/api/user/editAliInfo', 'GET', {
					ali_account:this.zfbMsg.ali_account,
					ali_name:this.zfbMsg.ali_name,
					captcha:this.code
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
	    background-color: #FAFAFA;
	    min-height: calc(100vh);
	}
	.ljbd{
		position: fixed;
		bottom: 50rpx;
		left: 30rpx;
		right: 30rpx;
	}
	.logoutBtn {
	  padding: 18rpx 272rpx;
	  background-color: #00D4E2;
	  border-radius: 41rpx;
	  font-size: 32rpx;
	  font-family: PingFang SC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  margin-top: 353rpx;
	}
	.minwith {
		min-width: 200rpx;
	}

	.huangsetext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color:#FAB536;
		width: 210rpx;
	}

	.xiahuaxian {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.02);
	}
</style>
